<template>
  <el-card class="order-list-card">
    <div class="table-header">
      <div class="label">最近订单</div>
      <div class="status-filter">
        <el-select v-model="selectedStatus" placeholder="筛选状态">
          <el-option label="全部" value="" />
          <el-option label="已完成" value="completed" />
          <el-option label="已退款" value="refunded" />
        </el-select>
      </div>
    </div>

    <div class="table-body">
      <el-table
        :data="filteredOrders"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="createTime" label="订单日期" width="150" />
        <el-table-column prop="money" label="订单金额" width="120" />
        <el-table-column
          #default="scope"
          width="100"
          label="是否支付"
          >{{ scope.row.payment == 0 ? "否" : "是" }}</el-table-column
        >
      </el-table>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, ref, computed } from 'vue';
import { ElCard, ElTable, ElTableColumn, ElSelect, ElOption } from 'element-plus';

interface Order {
  id: number;
  date: string;
  amount: number;
  status: string;
}

interface Member {
  orders: Order[];
}

const props = defineProps({
  member: {
    type: Object as PropType<Member>,
    required: true
  }
});

const selectedStatus = ref('');

const filteredOrders = computed(() => {
  return props.member.orders;
});
</script>

<style scoped>
.order-list-card {
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.table-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  line-height: 1.6;
}

.status-filter {
  margin-left: auto;
}
</style>



